<template>
  <div class="order-item" @click="handleClick">
    <mu-list-item avatar :ripple="false" button>
      <mu-list-item-action>
        <ItemImg :src="data.img" />
      </mu-list-item-action>
      <mu-list-item-content>
        <mu-list-item-title>{{ data.name }}</mu-list-item-title>
        <mu-list-item-sub-title>
          {{ data.sex }} {{ data.age }}岁
        </mu-list-item-sub-title>
        <span>{{ data.package.value }}</span>
        <span class="status" :style="getStatusStyle(data.status)">{{
          data.status
        }}</span>
      </mu-list-item-content>
    </mu-list-item>
    <mu-divider></mu-divider>
  </div>
</template>

<script>
import ItemImg from "@/components/ItemImg/index.vue";
export default {
  name: "OrderItem",
  components: {
    ItemImg,
  },
  props: {
    data: Object,
  },
  methods: {
    getStatusStyle(status) {
      const colors = {
        待接单: "#67C23A",
        进行中: "#F56C6C",
        待评价: "#E6A23C",
        已完成: "#909399",
      };
      return { color: colors[status] };
    },
    handleClick() {
      this.$emit("click");
    },
  },
};
</script>

<style scoped>
.order-item {
  position: relative;
}
.status {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
